import { defineComponent } from 'vue'
import { NCard, NTabPane, NTabs, useMessage } from 'naive-ui'
import infoAlarmRecord from '@/views/integration/monitor/infoAlarmRecord'
import infoRuleDefine from '@/views/integration/monitor/infoRuleDefine'
import infoTriggerRecord from '@/views/integration/monitor/infoTriggerRecord'
import { useRouter } from 'vue-router'

const monitorInfo = defineComponent({
  name: 'monitorInfo',
  components: {
    infoAlarmRecord,
    infoRuleDefine,
    infoTriggerRecord
  },
  setup() {
    const router = useRouter()
    const message = useMessage()

    const verifyParams = function () {
      if (
        !router.currentRoute.value.query.tableName ||
        !router.currentRoute.value.query.schemaName
      ) {
        message.info('参数错误')
        router.push('/integration/monitor')
      }
    }

    verifyParams()

    return {
      verifyParams,
      router,
      message
    }
  },
  render() {
    return (
      <NCard>
        <NTabs type='line' animated>
          <NTabPane name='rule-define' tab='规则定义'>
            <infoRuleDefine></infoRuleDefine>
          </NTabPane>
          <NTabPane name='trigger-record' tab='触发记录'>
            <infoTriggerRecord></infoTriggerRecord>
          </NTabPane>
          <NTabPane name='alarm-record' tab='报警记录'>
            <infoAlarmRecord></infoAlarmRecord>
          </NTabPane>
        </NTabs>
      </NCard>
    )
  }
})

export default monitorInfo
